<template>
    <div class="level">
        <!-- <div class="content">
            <div class="left">资源层级</div>
            <ul class="hospital">
                <li :class="{ active: '' === activeLevel }" @click="changeLevel('')">全部</li>
                <li v-for="item in levelArr" :key="item.id" :class="{ active: item.value === activeLevel }"
                    @click="changeLevel(item.value)">
                    {{ item.name }}
                </li>
            </ul>
        </div> -->
        <ElDescriptions class="m-20px" :column="1" size="default" border>
            <ElDescriptionsItem v-for="option in options">
                <template #label>
                    <div class="filter-cell-item">
                        {{ option.label }}
                    </div>
                </template>
                <ElRadioGroup size="large" v-model="filterOptions[option.name]"
                    @change="() => { $emit('getFilterOptions', filterOptions) }">
                    <ElRadioButton v-for="item in option.value" :label="item.label" :value="item.value" />
                </ElRadioGroup>
            </ElDescriptionsItem>
        </ElDescriptions>
    </div>
</template>

<script setup lang="tsx" name="Level">
import { onMounted, reactive } from 'vue'
import { options } from './filterOptions'
import { ElDescriptions, ElDescriptionsItem, ElRadioGroup, ElRadioButton } from 'element-plus'
// 组件挂载完毕后，立刻查询医院的等级目录信息
onMounted(() => {

})

const $emit = defineEmits(['getFilterOptions'])

const filterOptions = reactive({
    resourceLevel: 'local',
    resourceBasicCatalog: 'all',
    resourceThemeCatalog: 'all',
    resourceType: 'all'
})

</script>

<style lang="scss">
.filter-cell-item {
    display: flex;
    align-items: center;
}

.el-radio-button__inner {
    border: none;
    border-left: none !important;
}
</style>